<template>
    <div>
        <div class="category">
            <div class="item" @click="choice_cate('essay')" :class="{ 'isactive': isactive == 'essay' }">
                普通文章
            </div>
            <div class="item" @click="choice_cate('video')" :class="{ 'isactive': isactive === 'video' }">
                视频文章
            </div>
        </div>
        <el-table :data="dataList" style="width: 100%">
            <el-table-column label="评论时间" width="180">
                <template #default="scope">
                    <div style="display: flex; align-items: center">
                        <el-icon>
                            <timer />
                        </el-icon>
                        <span style="margin-left: 10px">{{ scope.row.format_time }}</span>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="评论文章" width="180">
                <template #default="scope">
                    <span>{{ scope.row.article.title }}</span>
                </template>
            </el-table-column>
            <el-table-column label="评论用户" width="180">
                <template #default="scope">
                    <span>{{ scope.row.user.username }}</span>
                </template>
            </el-table-column>
            <el-table-column label="评论内容" width="180">
                <template #default="scope">
                    <span>{{ scope.row.comment_text }}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template #default="scope">
                    <el-popconfirm title="确认删除?" confirm-button-text="确认" cancel-button-text="取消"
                        @confirm="handleDelete(scope.$index, scope.row)">
                        <template #reference>
                            <el-button size="small" type="danger">
                                删除
                            </el-button>
                        </template>
                    </el-popconfirm>

                </template>
            </el-table-column>
        </el-table>
        <div class="page">
            <el-pagination v-model:current-page="currentPage" layout="prev, pager,next" background :page-size="10"
                :total="count" @current-change="choice" />
        </div>
    </div>
</template>

<script setup lang="ts">
import { Timer } from '@element-plus/icons-vue'
import { ref, onMounted } from "vue"
import DiscussStore from '@/store/DiscussStore';
const store = DiscussStore()
const currentPage = ref(1)
const dataList = ref<[]>([])
const count = ref(10)
const types = ref('essay')
const isactive = ref("essay")
onMounted(() => {
    getlist()
})
const getlist = async () => {
    const result: any = await store.get_list(currentPage.value * 10 - 10, types.value)
    console.log(result.data.dislist)
    dataList.value = result.data.dislist
    count.value = parseInt(result.data.totalCount)

}

const handleDelete = async (index: number, row: any) => {
    index
    await store.delete_one(row._id)
    getlist()
}

const choice = () => {

    getlist()
}
const choice_cate = (e: string) => {
    types.value = e
    isactive.value = e
    currentPage.value = 1
    getlist()
}
</script>

<style scoped lang="scss">
.category {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 0.5vw;

    .item {
        font-size: 1.2vw;
        padding: 0.5vw;
        border-radius: 10px;
        margin-right: 1vw;
        background-color: rgba(255, 255, 255, 0.8);
    }

    .isactive {
        background-color: orange;
    }

    .item:hover {
        background-color: orange;
    }
}

.page {
    display: flex;
    justify-content: flex-end;
    margin-top: 1vw;
}
</style>